<template>
  <my-dv-page v-bind="$attrs">
    <my-dv-header3>
      <my-dv-title type="primary" strong shadow x-align="center"
        >智慧校园一张图</my-dv-title
      >
    </my-dv-header3>
    <my-dv-box
      layout
      :gap="20"
      top="100px"
      left="20px"
      width="calc(100% - 40px)"
      height="calc(100% - 120px)"
    >
      <my-dv-box width="100%" :weight="2" layout direction="column" :gap="20">
        <my-dv-box layout :gap="20" height="100%">
          <my-dv-border9 width="100%">
            <my-dv-title
              :level="6"
              left="10px"
              top="10px"
              shadow
              strong
              type="primary"
              >校园概况</my-dv-title
            >
            <my-dv-box
              layout
              :gap="0"
              top="50px"
              height="calc(100% - 40px)"
              width="100%"
            >
              <my-dv-box
                v-for="(items, index) in homeCount"
                :key="index"
                layout
                width="100%"
                direction="column"
              >
                <my-dv-box
                  v-for="(item, key) in items"
                  :key="key"
                  height="100%"
                  content-align="center"
                >
                  <my-dv-number
                    :value="item.value"
                    :level="3"
                    :position="false"
                  ></my-dv-number>
                  <my-dv-text :level="4" :position="false" type="secondary">{{
                    item.label
                  }}</my-dv-text>
                </my-dv-box>
              </my-dv-box>
            </my-dv-box>
          </my-dv-border9>
          <my-dv-border9 width="100%">
            <my-dv-title
              :level="6"
              left="10px"
              top="10px"
              shadow
              strong
              type="primary"
              >学生请假</my-dv-title
            >
            <my-dv-list
              scroll
              top="30px"
              width="100%"
              height="260px"
              :columns="studentList.columns"
              :rows="studentList.rows"
            ></my-dv-list>
          </my-dv-border9>
        </my-dv-box>
        <my-dv-border9 height="100%" :weight="3">
          <my-dv-title
            :level="6"
            left="10px"
            top="10px"
            shadow
            strong
            type="primary"
            >校园风采</my-dv-title
          >
          <my-dv-loading v-if="loading"></my-dv-loading>
          <my-map
            v-else
            height="100%"
            width="100%"
            :center="maps.center"
            :zoom="maps.zoom"
            :adapter="maps.adapter"
            :filter="maps.filter"
          >
          <my-map-image v-for="(m,i) in markers" :key="i" :coordinate="m.coordinate" 
            :src="m.icon" :size="m.size" :rotateWithView="true" @click="clickMapImage(m)"></my-map-image>            
          </my-map>
        </my-dv-border9>
        <my-dv-box layout :gap="20" height="100%">
          <my-dv-border9 width="100%">
            <my-dv-title
              :level="6"
              left="10px"
              top="10px"
              shadow
              strong
              type="primary"
              >今日课表</my-dv-title
            >
            <my-dv-list
              scroll
              top="30px"
              width="100%"
              height="260px"
              :columns="scheduleList.columns"
              :rows="scheduleList.rows"
            ></my-dv-list>
          </my-dv-border9>
          <my-dv-border9 width="100%">
            <my-dv-title
              :level="6"
              left="10px"
              top="10px"
              shadow
              strong
              type="primary"
              >教工请假</my-dv-title
            >
            <my-dv-list
              scroll
              top="30px"
              width="100%"
              height="260px"
              :columns="teacherList.columns"
              :rows="teacherList.rows"
            ></my-dv-list>
          </my-dv-border9>
        </my-dv-box>
      </my-dv-box>
      <my-dv-box width="100%" layout direction="column" :gap="20">
        <my-dv-border9 width="100%">
          <my-dv-title
            :level="6"
            left="10px"
            top="10px"
            shadow
            strong
            type="primary"
            >校园公告</my-dv-title
          >
          <my-dv-list
            scroll
            top="30px"
            width="100%"
            height="260px"
            :columns="noticeList.columns"
            :rows="noticeList.rows"
          ></my-dv-list>
        </my-dv-border9>
        <my-dv-border9 height="100%" :weight="2">
          <my-dv-title
            :level="6"
            left="10px"
            top="10px"
            shadow
            strong
            type="primary"
            >在校生统计</my-dv-title
          >
          <my-dv-bar
            fit
            :columns="student.columns"
            :rows="student.rows"
          ></my-dv-bar>
        </my-dv-border9>
        <my-dv-border9 height="100%">
          <my-dv-title
            :level="6"
            left="10px"
            top="10px"
            shadow
            strong
            type="primary"
            >教职工统计</my-dv-title
          >
          <my-dv-ring
            fit
            :columns="teacher.columns"
            :rows="teacher.rows"
            legend="v"
          ></my-dv-ring>
        </my-dv-border9>
      </my-dv-box>
    </my-dv-box>
    <el-dialog :title="mapPopup.title" :visible.sync="mapPopup.show" width="40%" :modal="false" @close="hidePopup">
      <el-image fit="contain" :src="mapPopup.img" :preview-src-list="mapPopup.previews"></el-image>
    </el-dialog>
  </my-dv-page>
</template>
<script>
/* eslint-disable */

import buildding from '@/assets/building.png'
import ajax from "$ui/utils/ajax"

export default {
  data() {
    return {
      homeCount: [],
      scheduleList: {
        columns: ["节次", "班级", "课程"],
        rows: [],
      },
      noticeList: {
        columns: ["标题", "发布时间"],
        rows: [],
      },
      studentList: {
        columns: ["班级", "学号-姓名"],
        rows: [],
      },
      teacherList: {
        columns: ["姓名", "请假类别"],
        rows: [],
      },
      teacher: {
        columns: ["职工类别", "人数"],
        rows: [
          ["专职", 320],
          ["兼职", 302],
          ["其它", 334],
        ],
      },
      student: {
        columns: ["年级", "学生人数"],
        rows: [],
      },

      maps: {
        distance: 5,
        // Baidu,Amap,TDT
        adapter: "Amap",
        center: [116.701983, 33.888905],
        filter: {
          brightness: 0.66,
          contrast: 2,
          grayscale: 0.47,
          "hue-rotate": 0,
          opacity: 1,
          saturate: 10,
          sepia: 0.94,
          invert: 1,
        },
        zoom: 16,
        popup: {
          title: "家庭信息",
          width: "480px",
          height: "450px",
          offset: [0, 200],
          autoPan: true,
          theme: "dark",
        },
      },
      markers: [],
      mapPopup: {show:false},
      loading: true,
    };
  },
  created() {    
    this.apiDs("dv_statics_mapcenter").then(data => {
       const ll = data[0].value.split(',');
      this.maps.center = [parseFloat(ll[0]), parseFloat(ll[1])]
    });
    // this.geoAble = window.location.protocol === "https:";

      //延迟取地图数据
    this.loadMapData();
    
    //10分钟刷新一次列表数据
    setInterval(() => {this.refreshData();}, 600 * 1000);

    //加载统计数据
    this.loadStatics();    
  },
  methods: {
    refreshData() {
        this.apiDs("dev_statics_schedule").then((data) => {
            const rows = [];
            for (let i = 0; i < data.length; i++) {
                rows.push([
                data[i].section_name,
                data[i].class_name,
                data[i].course_name,
                ]);
            }
            this.scheduleList.rows = rows;
        });

        this.apiDs("dv_statics_notice").then((data) => {
            const rows = [];
            for (let i = 0; i < data.length; i++) {
                rows.push([data[i].title, data[i].publish_time]);
            }
            this.noticeList.rows = rows;
        });
    },
    loadStatics(){
        this.apiDs("dev_statics_student").then((data) => {
            const rows = [];
            for (let i = 0; i < data.length; i++) {
                rows.push([data[i].class_name, data[i].student_name]);
            }
            this.studentList.rows = rows;
        });

        this.apiDs("dev_statics_teacher").then((data) => {
            const rows = [];
            for (let i = 0; i < data.length; i++) {
                rows.push([data[i].teacher_name, data[i].type]);
            }
            this.teacherList.rows = rows;
        });

        this.apiDs("chart_sutdent_grade").then((data) => {
            const rows = [];
            for (let i = 0; i < data.length; i++) {
                rows.push([data[i].label, data[i].value]);
            }
            this.student.rows = rows;
        });

        this.apiDs("chart_teacher_type").then((data) => {
            const rows = [];
            for (let i = 0; i < data.length; i++) {
                rows.push([data[i].label, data[i].value]);
            }
            this.teacher.rows = rows;
        });

        this.apiDs("dv_statics_count").then((data) => {
            const rows = [];
            for (let i = 0; i < data.length; i++) {
                const row = [data[i++]];
                if (i < data.length) {
                row.push(data[i]);
                }
                rows.push(row);
            }
            this.homeCount = rows;
        });
    },
    apiGet(params) {
      return ajax({
        url: "/dv/get",
        method: "post",
        data: params,
      });
    },
    apiDs(dsCode, params) {
      return ajax({
        url: "/dv/ds/" + dsCode,
        method: "get",
        data: params,
      });
    },
    loadMapData() {
      this.apiDs("dv_statics_map").then((data) => {
        const rows = [];
        data.forEach((row) => {
            if(!row.location){
              return;
            }
            const ll = row.location.split(',')
            const marker = {
                coordinate: [parseFloat(ll[0]), parseFloat(ll[1])],
                id: row.id,
                name: row.name,
                type: row.type,
                imgs: row.imgs,
                icon: buildding, //'assets/icon/' + row.type + '.png'
                size: [60,60]
            };
            rows.push(marker);
        });
        this.markers = rows;
        this.loading = false;
      });
    },
    clickMapImage(m){
        if(m.type == 'building'){
            let imgs = null; 
            if(m.imgs){
              imgs = m.imgs.split(',')
              imgs = imgs.map(e => window.__MY_CONFIG__.API_HOST + e)
            }else{
               imsg = [buildding]
            } 
            console.log(imgs)
            this.mapPopup = {
                show: true,
                position: m.coordinate,
                title: m.name,
                img: imgs[0],
                previews: imgs
            }
        }else{
            alert(m.name)
        }
    },
    hidePopup() {
        this.mapPopup = {show:false}
    }
  }
};
</script>
<style lang="scss" scoped>
.my-dv-page {
  background-image: url("~$ui/assets/bg/03.jpg");
  background-size: cover;
}

.my-dv-list {
  /deep/ {
    td,
    th {
      text-align: center;
    }
  }
}

.my-dv-menu {
  /deep/ {
    .my-dv-menu-item {
      margin-left: -50px;
    }
  }
}
</style>
